<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body, html {
		    width: 100%;
		    height: 100%;
		    display: flex;
		    flex-direction: row;
		    padding: 20px;
		}
		
		.g-contaner {
		    width: 300px;
		}
		
		p {
		    width: 200px;
		    max-height: 0;
		    box-sizing: border-box;
		    line-height: 24px;
		    background: #ddd;
		    overflow: hidden;
		    transition: all .3s linear;
		}
		
		.g-btn {
		    width: 80px;
		    padding: 5px;
		    border: 1px solid #333;
		    margin-bottom: 10px;
		    cursor: pointer;
		}
		
		.g-btn:hover ~ .content {
		    max-height: 300px;
		}

	</style>
	<body>
		<div class="g-contaner">
		    <div class="g-btn">Hover Me</div>
		    <p class="content">
		    能够适配任意高度。能够适配任意高度。能够适配任意高度。
		    </p>
		</div>
		
		<div class="g-contaner">
		    <div class="g-btn">Hover Me</div>
		    <p class="content">
		    能够适配任意高度。能够适配任意高度。能够适配任意高度。能够适配任意高度。能够适配任意高度。能够适配任意高度。
		    </p>
		</div>
	</body>
</html>
